<template>
    <div class="wrapper">
        <scroller class="scroller" :style="{ width: screenWidth, height: screenHeight }">
            <!--<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">-->
                <!--<text class="indicator">Refreshing ...</text>-->
            <!--</refresh>-->

            <text class="button" @click="jump({url: 'todo'})">Jump Todo</text>
            <text class="button" @click="jump({url: 'animation'})">Jump Animation</text>
            <text class="button" @click="jump({url: 'dom'})">Jump Dom</text>
            <text class="button" @click="jump({url: 'picker'})">Jump Picker</text>
            <text class="button" @click="jump({url: 'clipboard'})">Jump Clipboard</text>
            <text class="button" @click="jump({url: 'stream'})">Jump Stream</text>
            <text class="button" @click="jump({url: 'webview'})">Jump Webview</text>
            <text class="button" @click="jump({url: 'welcome'})">Jump Welcome</text>

            <!--<loading class="loading" @loading="onloading" :display="showLoading">-->
                <!--<text class="indicator">Loading ...</text>-->
            <!--</loading>-->
        </scroller>
    </div>
</template>
<script>
    var navigator = weex.requireModule('navigator');
    var modal = weex.requireModule('modal');

    export default {
        data () {
            return {
                refreshing: false,
                showLoading: 'hide',
                screenWidth: this.$store.state.deviceWidth,
                screenHeight: this.$store.state.deviceHeight
            }
        },
        methods: {
            jump (e) {
                var params = {
                    url: e.url,
                    animated: 'true',
                };
                navigator.push(params, (event) => {

                })
            },
            onrefresh (event) {
                console.log('is refreshing');
                modal.toast({message: 'refresh', duration: 1});
                this.refreshing = true;
                setTimeout(() => {
                    this.refreshing = false
                }, 2000)
            },
            onpullingdown (event) {
                console.log('is onpulling down');
                modal.toast({ message: 'pulling down', duration: 1 })
            },
            onloading (event) {
                modal.toast({message: 'loading', duration: 1});
                this.showLoading = 'show';
                setTimeout(() => {
                    this.showLoading = 'hide'
                }, 1500)
            }
        },
        created() {
            console.log(this.$getConfig());
        }
    };
</script>
<style scoped>

    .wrapper {
        flex-direction: column;
        justify-content: center;
    }
    .button {
        font-size: 60px;
        width: 450px;
        text-align: center;
        margin-top: 30px;
        margin-left: 150px;
        padding-top: 20px;
        padding-bottom: 20px;
        border-width: 2px;
        border-style: solid;
        color: #666666;
        border-color: #DDDDDD;
        background-color: #F5F5F5;
    }
    .scroller {
        flex: 1;
    }

    .indicator {
        color: #888888;
        font-size: 42px;
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
    }
    .refresh {
        justify-content: center;
    }
    .loading {
        justify-content: center;
    }
</style>
